<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			select{
				width: 200px;
				height: 400px;
			}
		</style>
		<script src="node_modules/jquery/dist/jquery.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<select multiple id="sel1">
		    <option value="">篮球</option>
		    <option value="">足球</option>
		    <option value="">棒球</option>
		    <option value="">羽毛球</option>
		    <option value="">乒乓球</option>
		    <option value="">橄榄球</option>
		    <option value="">桌球</option>
		</select>
		<button>--向右--></button>
		<button>--全右--></button>
		<button><--向左--</button>
		<button><--全左--</button>
		<select multiple id="sel2">
		
		</select>
		<script type="text/javascript">
			$("button:eq(0)").click(function  () {
				$("#sel1 option").each(function  (index,item) {
					//item是原生对象
					if ($(item).prop("selected")) {
						$(item).appendTo($("#sel2"));
					}
				})
			});
			$("button:eq(1)").click(function  () {
				$("#sel1 option").each(function  (index,item) {
					//item是原生对象
					$(item).appendTo($("#sel2"));
				})
			});
			$("button:eq(2)").click(function  () {
				$("#sel2 option").each(function  (index,item) {
					//item是原生对象
					if ($(item).prop("selected")) {
						$(item).appendTo($("#sel1"));
					}
				})
			});
			$("button:eq(3)").click(function  () {
				$("#sel2 option").each(function  (index,item) {
					//item是原生对象
					$(item).appendTo($("#sel1"));
				})
			});
		</script>
	</body>
</html>
